<template>
	<view class="wrap">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<view class="top">
			<view class="left">
				<view class="mask">
					<image src="https://tb.wuyouzhuan888.com/applet-icon/lock.png" class="lock" mode="">
					</image>
				</view>
				<image class="curImg" :src="curImg">
				</image>
			</view>
			<view class="right">
				<view class="dowload1" @click="clickDownload({types:'mp4s'})" v-if="mp4_url">
					<image class="icons" src="https://tb.wuyouzhuan888.com/applet-icon/dowload_btn.png"></image>
					<view class="text">语音表情包</view>
				</view>
				<view class="dowload" @click="clickDownload({types:'imgs'})">
					<image class="icons" src="https://tb.wuyouzhuan888.com/applet-icon/dowload_btn.png"></image>
					<view class="text">立即下载</view>
				</view>
				<button class="share" open-type="share" style="border-radius: 70rpx;">
					<view class="btn_box">
						<image class="icons" src="https://tb.wuyouzhuan888.com/applet-icon/share_btn.png">
							<view class="text">分享好友</view>
						</image>
					</view>
				</button>

			</view>
		</view>
		<view class="title">
			<view class="line1">
			</view>
			{{atlasName}}
		</view>
		<scroll-view scroll-y="true" class="data-list" scroll-with-animation :scroll-top="scrollTop">
			<view class="photo">
				<view class="item" v-for="(item,index) in imgList" @click="check(item,index)"
					:class="{'active':cur==index}">
					<view class="adVipMask">
						<view class="cont">
							<image class="icon" src="https://tb.wuyouzhuan888.com/applet-icon/check.png" mode="">
							</image>
						</view>
					</view>
					<view class="mask2" v-if="item.mp4_url">
						<view class="cont">
							<image class="icon" src="https://tb.wuyouzhuan888.com/applet-icon/laba.png" mode=""></image>
						</view>
					</view>
					<image class="img1" :src="item.url">
					</image>
				</view>
			</view>
		</scroll-view>
		<u-popup border-radius="20" v-model="adVipMask" mode="center">
			<image @click="adVipMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<adVipMask :usableDownload="usableDownload" :isIPhone="isIPhone" @clickWatchAd="clickWatchAd"
					@clickVip="clickVip" @closeDk="closeDk" />
			</view>
		</u-popup>
		<u-popup border-radius="20" v-model="noNumberMask" mode="center">
			<image @click="noNumberMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<noNumberMask :type="noNumberMaskType" @clickVip="clickVip" :content="maskContent" @closeDk="closeDk" />
			</view>
		</u-popup>
		<u-popup border-radius="20" v-model="saveMask" mode="center">
			<image @click="saveMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<saveMask @closeDk="closeDk" />
			</view>
		</u-popup>
		<u-popup border-radius="20" v-model="sampleMask" mode="center">
			<image @click="sampleMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<sampleMask @clickSample="clickSample" />
			</view>
		</u-popup>
	</view>
</template>
<script>
	import adVipMask from '../../../components/mask/adVip.vue'
	import sampleMask from '../../../components/mask/sample.vue';
	import saveMask from '../../../components/mask/save.vue'
	import noNumberMask from '@/components/mask/noNumber.vue'
	export default {
		components: {
			adVipMask,
			sampleMask,
			saveMask,
			noNumberMask
		},
		data() {
			return {
				scrollTop: 0,
				noNumberMaskType: 1, //1 1个按钮 2 两个按钮
				noNumberMask: false,
				sampleMask: false,
				saveMask: false,
				adVipMask: false,
				maskContent: '',
				cur: 0,
				curImg: "",
				shareTitle: '',
				// 任务ID
				taskId: 0,
				// 模版ID
				movId: 0,
				// 创作者ID
				creatorId: 0,
				// 账号ID
				accountId: 0,
				callbackId: 0,
				collectionId: 0,
				urlId: 0,
				// 资源ID
				resourcesId: 0,
				// 图片数组
				imgList: [],
				// 图集ID
				atlasId: 0,
				// 图集名称
				atlasName: '',
				// 是否会员
				isVip: false,
				// 是否能下载
				canDownload: false,
				// 每日能下载的总数
				canDownloadTotal: 0,
				// 剩余可下载的次数
				usableDownload: 0,
				// 激励广告ID
				incentiveAdId: '',
				// 广告加载状态 1成功 0失败
				adStatus: 1,
				// 苹果手机
				isIPhone: false,
				// 图集资源json
				jsonImgList: '',
				shareId: '',
				mp4_url: '',
				types: ''
			};
		},

		onLoad(options) {
			uni.showLoading({
				title: "加载中...",
			})
			this.isIPhone = (uni.getSystemInfoSync().osName == 'ios')
			// 任务ID
			this.taskId = options.taskId ?? 0;
			// 模版ID
			this.movId = options.movId ?? 0;
			// 创作者ID
			this.creatorId = options.creatorId ?? 0;
			// 账号ID
			this.accountId = options.accountId ?? 0;
			this.callbackId = options.callbackId ?? 0;
			this.collectionId = options.collectionId ?? 0;
			this.urlId = options.urlId ?? 0;
			// 图集ID
			this.atlasId = options.atlasId;
			// 图集名称
			this.atlasName = options.atlasName;
			// 选中效果
			this.cur = options.selectIndex;
			//滚动高度
			this.scrollTop = Math.floor(this.cur / 4) * 91

			// ((this.cur / 4) + (this.cur % 4 > 0 ? 1 : 0)) * 85
			// json资源列表 用于小程序跳转
			this.jsonImgList = options.imgList
			// 资源列表
			this.imgList = JSON.parse(decodeURIComponent(options.imgList));
			// 选中图片
			this.curImg = this.imgList[this.cur].url;
			this.mp4_url = this.imgList[this.cur].mp4_url
			// 获取资源ID
			this.resourcesId = this.imgList[this.cur].resourcesId
			this.getAdInfo()
		},
		mounted() {
			uni.hideLoading()
		},
		// 加载分享信息
		async onShareAppMessage() {
			if (this.shareTitle == '') {
				// #ifdef MP-TOUTIAO
				// 获取分享信息
				await this.getDyShareInfo();
				// #endif
			}
			return {
				// 标题
				title: this.shareTitle,
				// url
				path: "pages/sys/home_bags/photodetail?imgList=" + encodeURIComponent(JSON.stringify(
						this
						.imgList)) +
					'&atlasId=' + this.atlasId +
					'&atlasName=' + this.atlasName +
					'&selectIndex=' + this.cur,
				templateId: this.shareId,
			};
		},

		methods: {
			// 选择图片
			check(item, index) {
				this.cur = index
				this.curImg = item.url
				this.mp4_url = item.mp4_url
				// 获取资源ID
				this.resourcesId = item.resourcesId
			},
			closeDk() {
				this.adVipMask = false
				this.noNumberMask = false
				this.saveMask = false
			},
			// 点击下载
			async clickDownload({
				types
			}) {
				this.types = types
				// 获取用户下载信息
				await this.getUserDownloadInfo()
				// 用户是会员
				if (this.isVip) {
					// 今日下载次数没用完
					if (this.usableDownload) {
						// 执行下载
						if (types == 'imgs') {
							this.saveImage();
						} else if (types == 'mp4s') {
							this.downLoadVedio()
						}
					} else {
						// 会员下载额度用完
						this.maskContent = '当前会员享受每日额度为' + this.canDownloadTotal + '张，今日已经全部消耗完，请明日再来~';
						this.noNumberMask = true
						this.noNumberMaskType = 1
						return
					}
				} else {
					// 今日下载次数没用完
					if (this.usableDownload) {
						// 打开下载弹窗
						this.adVipMask = true;
					} else {
						// 今日下载次数没用完
						if (this.usableDownload) {
							// 打开下载弹窗
							this.adVipMask = true;
						} else {
							// 如果ios 打开ios跳转弹窗
							if (this.isIPhone) {
								this.maskContent = '已超今日限额，请明日再来！';
								this.noNumberMaskType = 1;
							} else {
								// 如果安卓 打开安卓弹窗
								this.maskContent = '已超今日限额，请明日再来；或开通会员畅享无广告下载！！！';
								this.noNumberMaskType = 2;
							}
							this.noNumberMask = true
						}
					}
				}
			},
			// 点击会员
			clickVip() {
				// 关闭弹窗
				this.adVipMask = false
				this.noNumberMask = false
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&atlasId=" + this.atlasId +
						"&callbackId=" + this.callbackId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						"&resourcesId=" + this.resourcesId,
					events: {
						isVip: data => {
							if (!data) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							}
						}
					}
				})
			},
			// 点击体验卡
			clickSample() {
				// 打开体验会员弹窗
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&callbackId=" + this.callbackId +
						"&atlasId=" + this.atlasId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						"&resourcesId=" + this.resourcesId +
						"&sample=" + true,
					events: {
						isVip: data => {
							if (!data) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							} else {
								this.sampleMask = false;
							}

						}
					}
				})
			},
			// 点击看广告
			clickWatchAd() {
				// 关闭弹窗
				this.adVipMask = false
				// 广告加载成功
				if (this.adStatus == 1) {
					tt.showLoading({
						title: '广告加载中...'
					})
					this.ad.show()
				} else {
					// 广告加载失败 直接下载
					if (this.types == 'imgs') {
						this.saveImage();
					} else if (this.types == 'mp4s') {
						this.downLoadVedio()
					}

				}

			},

			// 获取用户下载信息
			getUserDownloadInfo() {
				return new Promise((resolve) => {
					this.$u.api.download.getInfo().then(res => {
						if (res.code != 200) {
							uni.showModal({
								title: '获取用户信息失败',
								content: '请刷新后重试或重启小程序',
								showCancel: false,
								confirmText: '知道了'
							})
							// 是否会员
							this.isVip = false;
							// 是否能下载
							this.canDownload = false;
							// 每日能下载的总数
							this.canDownloadTotal = 0;
							// 剩余可下载的次数
							this.usableDownload = 0;
						} else {
							// 是否会员
							this.isVip = res.data.isVip;
							// 是否能下载
							this.canDownload = res.data.canDownload;
							// 每日能下载的总数
							this.canDownloadTotal = res.data.canDownloadTotal;
							// 剩余可下载的次数
							this.usableDownload = res.data.usableDownload;
						}

						resolve();
					})
				})
			},

			// 统计用户下载信息
			downloadStatistics() {
				return new Promise((resolve) => {
					this.$u.api.download.statistics({
						platform: 1,
						taskId: this.taskId,
						movId: this.movId,
						creatorId: this.creatorId,
						accountId: this.accountId,
						atlasId: this.atlasId,
						resourcesId: this.resourcesId,
						collectionId: this.collectionId,
						callbackId: this.callbackId,
						urlId: this.urlId,
						adStatus: this.adStatus,
						vipDownload: this.isVip ? 1 : 0
					}).then(res => {
						resolve();
					})
				})
			},

			// 获取抖音广告信息
			getDyAdInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getAdInfo().then(res => {
						if (res.code != 200) {
							// 激励广告ID
							this.incentiveAdId = '';
						} else {
							// 激励广告ID
							this.incentiveAdId = res.data.incentiveAdId;
						}

						resolve();
					})
				})
			},
			// 获取广告信息
			async getAdInfo() {
				// 激励广告为空
				if (this.incentiveAdId == '') {
					// #ifdef MP-TOUTIAO
					// 获取抖音广告信息
					await this.getDyAdInfo();
					// #endif
				}
				// 加载广告组件
				this.ad = tt.createRewardedVideoAd({
					adUnitId: this.incentiveAdId
				});

				//防止奖励重复发放
				try {
					if (this.ad.closeHandler) {
						this.ad.offClose(this.ad.closeHandler);
					}
				} catch (e) {}

				// 监听错误
				this.ad.onError(err => {
					// 广告加载失败
					this.adStatus = 0;
				});

				// 关闭广告后执行
				this.ad.closeHandler = (res) => {
					tt.hideLoading();
					if (res.isEnded) {
						if (this.types == 'imgs') {
							this.saveImage();
						} else if (this.types == 'mp4s') {
							this.downLoadVedio()
						}

					}
				}

				// 监听视频播放完成
				this.ad.onClose(this.ad.closeHandler);

				// 预加载资源
				this.ad.load();
			},

			// 保存图片
			saveImage() {
				this.downLoadImg()
			},
			// 下载图片
			downLoadImg() {
				const that = this;
				// 下载统计
				uni.showLoading({
					title: '下载中...'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				uni.downloadFile({
					url: this.curImg,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									that.downloadStatistics();
									that.saveMask = true;
								},
								fail: (res) => {
									uni.getSetting({
										success: (result) => {
											if (!result.authSetting[
													'scope.album']) {
												that.isAuth()
											}
										}
									});
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			// 下载语音表情包
			downLoadVedio() {
				const that = this;
				// 下载统计
				uni.showLoading({
					title: '下载中...'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				uni.downloadFile({
					url: this.mp4_url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									that.downloadStatistics();
									that.saveMask = true;
								},
								fail: (res) => {
									uni.getSetting({
										success: (result) => {
											if (!result.authSetting[
													'scope.album']) {
												that.isAuth()
											}
										}
									});
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					},
				})
			},
			// 引导用户开启权限
			isAuth() {
				uni.showModal({
					title: "温馨提示",
					content: '保存图片需要相关权限，请授权相册权限',
					confirmText: '前往授权',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									if (result.authSetting[
											'scope.album']) {
										if (this.types == 'imgs') {
											this.downLoadImg()
										} else if (this.types == 'mp4s') {
											this.downLoadVedio()
										}
									} else {
										this.$u.toast('授权失败')
									}
								},
							});
						}
					}
				});
			},
			// 获取抖音分享信息
			getDyShareInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getShareInfo().then(res => {
						this.shareId = res.data.shareId;
						this.shareTitle = res.data.shareTitle;
						resolve();
					})
				})
			},
		}
	};
</script>
<style scoped lang="scss" scoped>
	.data-list {
		height: calc(100vh - 260px);
	}

	/deep/ .u-mode-center-box {
		background: none !important;
		overflow: initial !important;
	}

	/deep/ .uni-scroll-view,
	/deep/ .uni-scroll-view-content {
		overflow: initial !important;
	}

	.curImg {
		width: 389rpx;
		height: 389rpx;
		border-radius: 20rpx;
	}

	.img1 {
		width: 145rpx;
		height: 145rpx;
		border-radius: 20rpx;
	}

	.close {
		width: 65rpx;
		height: 65rpx;
		display: block;
		position: fixed;
		top: 127rpx;
		right: 41rpx;
		z-index: 999;
	}

	.wrap {
		margin: 0 32rpx;

		.title {
			margin-top: 42rpx;
			font-size: 32rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			.line1 {
				margin-right: 10rpx;
				height: 30rpx;
				width: 5rpx;
				background: linear-gradient(to bottom, #05FAFE, #EF44C4);
				border-radius: 12rpx;
			}
		}

		.name {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}

		.top {
			display: flex;
			align-items: center;
			padding-top: 24rpx;

			.left {
				margin-right: 32rpx;
				width: 389rpx;
				height: 389rpx;
				position: relative;
				border-radius: 20rpx;
				overflow: hidden;

				.mask {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.5);
					z-index: 9;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.lock {
						width: 134rpx;
						height: 134rpx;
					}
				}
			}

			.right {
				margin-left: 42rpx;
				display: column;

				.dowload1 {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					width: 263rpx;
					height: 80rpx;
					background-color: #f6902c;
					border-radius: 40rpx;
					background-size: 263rpx;
					background-repeat: no-repeat;

					.icons {
						margin-left: 40rpx;
						width: 30rpx;
						height: 28rpx;
						padding-bottom: 5rpx;
					}

					.text {
						margin-left: 6px;
						font-size: 34rpx;
						color: #FFFFFF;
						padding-bottom: 10rpx;
						text-align: center;
					}
				}

				.dowload {
					display: flex;
					align-items: center;
					width: 263rpx;
					height: 80rpx;
					background-image: url('https://tb.wuyouzhuan888.com/applet-icon/dowload.png');
					background-size: 263rpx;
					background-repeat: no-repeat;

					.icons {
						margin-left: 40rpx;
						width: 30rpx;
						height: 28rpx;
					}

					.text {
						margin-left: 6px;
						font-size: 34rpx;
						color: #FFFFFF;
						text-align: center;
					}
				}

				.share {
					position: relative;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					width: 263rpx;
					height: 80rpx;
					background-color: #8340F1;

					.btn_box {
						position: absolute;
						left: 34rpx;
						top: 23rpx;
						bottom: 23rpx;
						display: flex;
						align-items: center;

						.icons {
							width: 30rpx;
							height: 28rpx;
						}

						.text {
							margin-left: 6px;
							font-size: 34rpx;
							color: #FFFFFF;
							text-align: center;
						}
					}
				}
			}
		}

		.photo {
			margin-top: 24rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-right: 37rpx;
				margin-bottom: 31rpx;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.mask2 {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.19);
					border-radius: 20rpx;
					display: block;
					opacity: 1;
					border: 2px solid #FFFFFF;
					background: rgba(0, 0, 0, 0.3);
					z-index: 5;

					.cont {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon {
							width: 64rpx;
							height: 64rpx;
						}
					}
				}

				.adVipMask {
					display: none;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.19);
					border-radius: 20rpx;
					opacity: 1;
					border: 2px solid #FFFFFF;
					background: rgba(0, 0, 0, 0.3);
					z-index: 8;

					.cont {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon {
							width: 64rpx;
							height: 64rpx;
						}
					}
				}

				&.active .adVipMask {
					display: block;
				}
			}
		}
	}
</style>